<template>
	<view class="zh-u-date-picker">
		<u-popup :show="props.show" :title="title" @close="close">
			<template v-slot:content>
				<picker-view v-if="props.show" :indicator-style="indicatorStyle" :value="value" @change="bindChange" @pickstart="pickstart" @pickend="pickend" class="picker-view">
				    <picker-view-column>
				        <view class="item" v-for="(item,index) in years" :key="index" style="line-height:50px">{{item}}年</view>
				    </picker-view-column>
				    <picker-view-column>
				        <view class="item" v-for="(item,index) in months" :key="index" style="line-height:50px">{{item}}月</view>
				    </picker-view-column>
				    <picker-view-column>
				        <view class="item" v-for="(item,index) in days" :key="index" style="line-height:50px">{{item}}日</view>
				    </picker-view-column>
				</picker-view>
			</template>
			<template v-slot:footer>
				<button class="app-primary-button" @click="change">确定</button>
			</template>
		</u-popup>
	</view>
</template>

<script setup lang="ts">
	import { ref, reactive } from 'vue'
	const props = withDefaults(defineProps<{
		title:string
		show:boolean
		date:string
	}>(), {
		show:false,
		title:'选择日期',
	})
	
	const nowDate:any = new Date()
	const years:any = reactive([])
	let year:any = nowDate.getFullYear()
	const months:any = reactive([])
	let month:any = nowDate.getMonth() + 1
	const days:any = ref([])
	let day:any = nowDate.getDate()
	let startYear = 2019
	
	for (let i = startYear; i <= year + 2; i++) {
		years.push(i)
	}
	
	for (let i = 1; i <= 12; i++) {
		months.push(i)
	}
	
	const initDays = (year:number, month:number) => {
		let max = 31
		if([1, 3, 5, 6, 8, 10, 12].includes(month)) {
			max = 31
		} else if([4, 6, 9, 11].includes(month)) {
			max = 30
		} else if([2].includes(month)) {
			if ((year % 4 == 0 && year % 100 != 0) || (year % 400 == 0)) { // 闰年
				max = 29
			} else { // 平年
				max = 28
			}
		}
		days.value = []
		for (let i = 1; i <= max; i++) {
			days.value.push(i)
		}
	}
	
	initDays(year, month)
	
	const indicatorStyle = `height: 50px;line-height:50px`
	let value = reactive([year - startYear, month - 1, day - 1])
	
	const selectedDateArr = props.date.split('-')
	const initYear = Number(selectedDateArr[0])
	const initMonth = Number(selectedDateArr[1])
	const initDay = Number(selectedDateArr[2])
	value = [initYear - startYear, initMonth - 1,initDay  - 1]

	const emit = defineEmits(['close', 'change'])
	
	const isMoving  = ref(false)
	const pickstart = () => {
		isMoving.value = true
	}
	
	const pickend = () => {
		isMoving.value = false
	}
	
	const bindChange = (e:any) => {
		const val = e.detail.value
		console.log(val)
		const year = val[0] + startYear
		const month = val[1] + 1
		if(val[2] === value[2]) {
			initDays(year,month)
		}
		value = val
	}
	
	const change = () => {
		if(!isMoving.value) {
			const year = value[0] + startYear
			const mouth = value[1] < 9?'0' + (value[1] + 1):value[1] + 1
			const day = value[2] < 9?'0' + (value[2] + 1):value[2] + 1
			const date = year + '-' + mouth + '-' + day
			emit('change', date)
		} else {
			const t = setTimeout(() => {
				change()
				clearTimeout(t)
			}, 100)
		}
	}

	const close = () => {
		emit('close')
	}
</script>

<style lang="scss" scoped>
	.zh-u-date-picker {
		.picker-view {
			height:600rpx;
			text-align: center;
			z-index:999;
		}
	}
</style>